<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--设置当前HTML文件的字符编码-->
    <meta charset="utf-8">
    <!--设置浏览器的兼容模式版本（让IE使用最新的渲染引擎工作）-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--声明当前网页在移动端浏览器中展示的相设置-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>传智播客</title>

    <!-- Bootstrap -->
    <!--引入Bootstrap核心样式表文件-->
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--条件注释的作用就是当判断当条件满足时执行注释中的HTML代码不满足时会当作注释忽略掉-->
    <!--让浏览器可以识别HTML5的新标签-->
    <!--respond让低版本的浏览器可以使用CSS3的媒体查询-->
    <!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.min.js"></script>
    <![endif]-->
    <!--自己写的文件默认放在最下面-->
    <link rel="stylesheet" href="css/main.css">
</head>
<body>

<!-- 头部区域 -->
<header id="header">
    <!--<div class="topbar hidden-sm hidden-xs">-->
    <div class="topbar visible-md visible-lg">
        <!--定义一个固定宽度且居中的版心-->
        <div class="container">
            <div class="row">
                <div class="col-md-2 text-center">
                    <a class="mobile-link" href="#">
                    <i class="icon-mobilephone"></i>
                    <span>手机微金所</span>
                    <!--这里使用的时bootstrap中的字体图标-->
                    <i class="glyphicon glyphicon-chevron-down"></i>
                    <img src="img/c_06.jpg" alt="扫一扫">
                    </a>
                </div>
                <div class="col-md-5 text-center">
                    <i class="icon-telephone"></i>
                    <span>400-508-0161(9:00 a.m.- 12:00 p.m.)</span>
                </div>
                <div id="login-a" class="col-md-2 text-center">
                    <a href="#">常见问题</a>
                    <a href="#">财富登录</a>
                </div>
                <div class="col-md-3 text-center">
                    <a href="#" class="btn btn-regi btn-sm">免费注册</a>
                    <!--按钮 链接 小按钮（第二小）首选项 大按钮 模态框(modal) 触发事件(data-toggle) 触发对象data-target(ID 或类)-->
                    <a href="#" class="btn btn-link btn-sm btn-primary btn-lg" data-toggle="modal" data-target="#loginModal">登录</a>
                </div>
            </div>
        </div>
    </div>
    <nav class="navbar affix-top">
        <div class="container navbar navbar-wjs navbar-static-top" data-spy="affix" data-offset-top="40" data-offset-bottom="200">
            <div class="navbar-header">
                <button id="btn" type="button" class="navbar-toggle collapsed"
                 data-toggle="collapse" data-target="#nav_list" aria-expanded="false">
                    <span class="sr-only">切换菜单</span>
                    <!--定义小屏幕后的那三条线-->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <i class="icon-icon"></i>
                    <i class="icon-logo"></i>
                </a>
            </div>
            <div id="nav_list" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-wjs">
                    <li><a href="#">我要投资</a></li>
                    <li><a href="#">我要借款</a></li>
                    <li><a href="#">平台介绍</a></li>
                    <li><a href="#">新手专区</a></li>
                    <li><a href="#">最新动态</a></li>
                    <li><a href="#">微论坛</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right hidden-sm">
                    <li><a href="#">个人中心</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<!-- /头部区域 -->
<!-- 广告轮播 -->
<!--该容器盒子必须加上 class="carousel slide" data-ride="carousel" 以表示当前是一个轮播图-->
<section id="main_ad" class="carousel slide" data-ride="carousel">

        <!--ol标签是图片轮播的控制点 指示器（图下面的小点，活动指示器） -->
        <ol class="carousel-indicators">
            <!--data-target属性就是指定当前控制点控制的是哪一个轮播图，其目的是如果界面上有多个轮播图，便于区分到底控制哪一个
            data-slide-to属性就是指当前的li元素绑定的是第几个轮播项 。必须给某个li加上active，默认显示（也就是项目焦点）-->
            <li data-target="#main_ad" data-slide-to="0" class="active"></li>
            <li data-target="#main_ad" data-slide-to="1"></li>
            <li data-target="#main_ad" data-slide-to="2"></li>
            <li data-target="#main_ad" data-slide-to="3"></li>
        </ol>

        <!-- 轮播项 -->
        <!--carousel-inner 是所有轮播项的容器盒子 role="listbox" 代表当前div是一个列表盒子，作用就是给当前div添加一个语义-->
        <div class="carousel-inner" role="listbox">
            <!--每一个 .item 就是单个轮播项目  active 只能有一个指的是哪张图片是焦点状态-->
            <div class="item active" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg"></div>
            <div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg"></div>
            <div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg"></div>
            <div class="item" data-image-lg="img/slide_04_2000x410.jpg" data-image-xs="img/slide_04_640x340.jpg"></div>
        </div>

        <!-- 轮播图上面左右两个控制按钮 a标签中的href属性必须指向需要控制的轮播图id  data-slide="prev"代表点击该链接会滚到上一张，设为next则相反-->
        <a class="left carousel-control" href="#main_ad" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">上一张</span>
        </a>
        <a class="right carousel-control" href="#main_ad" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">下一张</span>
        </a>

</section>
<!-- /广告轮播 -->
<!-- 特色介绍 -->
<section id="test">
    <div class="hidden-xs">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <a href="#">
                        <div class="media">
                            <div class="media-left">
                                <i class="icon-e907"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <p>银联支付全程保证支付安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="#">
                        <div class="media">
                            <div class="media-left">
                                <!--<a href="#">
                                    <img class="media-object" src="..." alt="...">
                                </a>-->
                                <i class="icon-e907"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <p>银联支付全程保证支付安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="#">
                        <div class="media">
                            <div class="media-left">
                                <!--<a href="#">
                                    <img class="media-object" src="..." alt="...">
                                </a>-->
                                <i class="icon-e907"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <p>银联支付全程保证支付安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="#">
                        <div class="media">
                            <div class="media-left">
                                <!--<a href="#">
                                    <img class="media-object" src="..." alt="...">
                                </a>-->
                                <i class="icon-e907"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <p>银联支付全程保证支付安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="#">
                        <div class="media">
                            <div class="media-left">
                                <!--<a href="#">
                                    <img class="media-object" src="..." alt="...">
                                </a>-->
                                <i class="icon-e907"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <p>银联支付全程保证支付安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="#">
                        <div class="media">
                            <div class="media-left">
                                <!--<a href="#">
                                    <img class="media-object" src="..." alt="...">
                                </a>-->
                                <i class="icon-e907"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4>
                                <p>银联支付全程保证支付安全</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>


    </div>
</section>
<!-- /特色介绍 -->
<!-- 立即预约 -->
<section id="ljyy">
    <div class="container">
        <p class="pull-left">
            <i class="icon-e906"></i>
            现在有<span>458</span>人在排队，累计预约交易成功<span>7409</span>次。 什么是预约投标？ <a href="#">立即预约</a>
        </p>
        <p class="pull-right hidden-xs">
            <a>
                <i class="icon-e905">微金所企业宣传片</i>
            </a>
        </p>
    </div>
</section>
<!-- /立即预约 -->
<!-- 产品推荐 -->
<section id="products">
    <div class="container">
            <div class="ul-wapper">
                <!-- Nav tabs -->
                <!--1. 给ul加一个容器，这个容器有横向滚动条
                    2. 动态设置ul的宽度，宽度是根据内容大小决定的
                         width = sum(li.width)-->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">特别推荐</a></li>
                    <li role="presentation"><a href="#tab2" aria-controls="profile" role="tab" data-toggle="tab">微投资</a></li>
                    <li role="presentation"><a href="#tab3" aria-controls="messages" role="tab" data-toggle="tab">微小宝</a></li>
                    <li role="presentation"><a href="#tab4" aria-controls="settings" role="tab" data-toggle="tab">微消费</a></li>
                    <li role="presentation"><a href="#tab5" aria-controls="zengli" role="tab" data-toggle="tab">微增利</a></li>
                    <li role="presentation"><a href="#tab6" aria-controls="zhuanrang" role="tab" data-toggle="tab">微转让</a></li>
                    <li role="presentation"><a href="#tab7" aria-controls="zhuanrang" role="tab" data-toggle="tab">微赚钱</a></li>
                    <li class="pull-right hidden-xs hidden-sm"><a href="#">更多</a></li>
                </ul>
            </div>

            <div class="tab-content">
                <!-- Tab panes -->
                <!-- .tab-pane定义当前是一个tab面板，通过id和选项卡标签关联起来 -->
                    <div role="tabpanel" class="tab-pane active fade in" id="tab1">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="panel panel-wjs actived">
                                    <!--panel-heading 用来设置面板头部样式-->
                                    <div class="panel-heading">
                                        <p>
                                            <b>8</b>
                                            <sub>%</sub>
                                        </p>
                                        <p><span>年利率</span></p>
                                    </div>
                                    <!--panel-body 用来设置面板内容-->
                                    <div class="panel-body">
                                        <p>新手体验包第288期</p>
                                        <!--嵌套栅格 流式布局-->
                                        <row>
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p>
                                                    <!--<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。-->
                                                    <strong>1000.00</strong>
                                                    <!--下标标签-->
                                                    <sub>万</sub>
                                                </p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p>
                                                    <!--<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。-->
                                                    <strong>1000.00</strong>
                                                    <!--下标标签-->
                                                    <sub>万</sub>
                                                </p>
                                            </div>
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p>
                                                    <!--<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。-->
                                                    <strong>1000.00</strong>
                                                    <!--下标标签-->
                                                    <sub>万</sub>
                                                </p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p>
                                                    <!--<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。-->
                                                    <strong>1000.00</strong>
                                                    <!--下标标签-->
                                                    <sub>万</sub>
                                                </p>
                                            </div>
                                        </row>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="panel panel-wjs">
                                    <div class="panel-heading">
                                        <p class="tooltips">
                                            <a class="badge badge-1" href="#" data-toggle="tooltip" data-placement="top"
                                               title="北京欢迎您">京</a>
                                            <a class="badge badge-2" href="#" data-toggle="tooltip" data-placement="top"
                                               title="上海欢迎您">沪</a>
                                        </p>
                                    </div>
                                    <div class="panel-body">
                                        panel content
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="panel panel-wjs actived">
                                    <!--panel-heading 用来设置面板头部样式-->
                                    <div class="panel-heading"></div>
                                    <!--panel-body 用来设置面板内容-->
                                    <div class="panel-body">
                                        <h5>新手体验包第288期</h5>
                                        <row>
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p>
                                                    <!--<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。-->
                                                    <strong>1000.00</strong>
                                                    <!--下标标签-->
                                                    <sub>万</sub>
                                                </p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p>
                                                    <!--<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。-->
                                                    <strong>1000.00</strong>
                                                    <!--下标标签-->
                                                    <sub>万</sub>
                                                </p>
                                            </div>
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p>
                                                    <!--<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。-->
                                                    <strong>1000.00</strong>
                                                    <!--下标标签-->
                                                    <sub>万</sub>
                                                </p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p>
                                                    <!--<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。-->
                                                    <strong>1000.00</strong>
                                                    <!--下标标签-->
                                                    <sub>万</sub>
                                                </p>
                                            </div>
                                        </row>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="panel panel-wjs">
                                    <div class="panel-heading">
                                        <p class="tooltips">
                                            <a class="badge badge-1" href="#" data-toggle="tooltip" data-placement="top"
                                               title="北京欢迎您">京</a>
                                            <a class="badge badge-2" href="#" data-toggle="tooltip" data-placement="top"
                                               title="北京欢迎您223">沪</a>
                                        </p>
                                    </div>
                                    <div class="panel-body">
                                        panel content
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="panel panel-wjs actived">
                                    <!--panel-heading 用来设置面板头部样式-->
                                    <div class="panel-heading"></div>
                                    <!--panel-body 用来设置面板内容-->
                                    <div class="panel-body">
                                        <h5>新手体验包第288期</h5>
                                        <row>
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p>
                                                    <!--<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。-->
                                                    <strong>1000.00</strong>
                                                    <!--下标标签-->
                                                    <sub>万</sub>
                                                </p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p>
                                                    <!--<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。-->
                                                    <strong>1000.00</strong>
                                                    <!--下标标签-->
                                                    <sub>万</sub>
                                                </p>
                                            </div>
                                            <div class="col-xs-6 text-left">
                                                <p>起步价</p>
                                                <p>
                                                    <!--<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。-->
                                                    <strong>1000.00</strong>
                                                    <!--下标标签-->
                                                    <sub>万</sub>
                                                </p>
                                            </div>
                                            <div class="col-xs-6 text-right">
                                                <p>起步价</p>
                                                <p>
                                                    <!--<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。-->
                                                    <strong>1000.00</strong>
                                                    <!--下标标签-->
                                                    <sub>万</sub>
                                                </p>
                                            </div>
                                        </row>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="panel panel-wjs">
                                    <div class="panel-heading">
                                        <p class="tooltips">
                                            <a class="badge badge-1" href="#" data-toggle="tooltip" data-placement="top"
                                               title="北京欢迎您">京</a>
                                            <a class="badge badge-2" href="#" data-toggle="tooltip" data-placement="top"
                                               title="北京欢迎您223">沪</a>
                                        </p>
                                    </div>
                                    <div class="panel-body">
                                        panel content
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane active" id="tab2">222</div>
                    <div role="tabpanel" class="tab-pane" id="tab3">333</div>
                    <div role="tabpanel" class="tab-pane" id="tab4">444</div>
                    <div role="tabpanel" class="tab-pane" id="tab5">555</div>
                    <div role="tabpanel" class="tab-pane" id="tab6">666</div>
                    <div role="tabpanel" class="tab-pane" id="tab7">666</div>
            </div>
    </div>
</section>
<!-- /产品推荐 -->
<!-- 新闻列表 -->
<section id="news">
    <div class="container">
        <div class="row">
            <div class="col-sm-2 col-sm-offset-3">
                <div class="news-title">全部新闻</div>
            </div>
            <div class="col-sm-1">
                <ul class="nav nav-pills">
                    <li role="presentation" class="active"><a data-title="全部新闻" href="#news01" data-toggle="tab" role="tab"><i class="icon-news1"></i></a></li>
                    <li role="presentation"><a data-title="媒体新闻" href="#news02" data-toggle="tab" role="tab"><i class="icon-news2"></i></a></li>
                    <li role="presentation"><a data-title="行业资讯" href="#news03" data-toggle="tab" role="tab"><i class="icon-news3"></i></a></li>
                    <li role="presentation"><a data-title="轻轻走143" href="#news04" data-toggle="tab" role="tab"><i class="icon-news4"></i></a></li>
                </ul>
            </div>
            <div class="col-sm-6">
                <div class="tab-content">
                    <!--fade 淡入淡出效果 active 必须加上in-->
                    <div role="tabpanel" class="tab-pane fade in active" id="news01">
                        <ul>
                            <li>微金所发钱了，</li>
                            <li>微金所发钱了，快来抢！！！！！</li>
                            <li>微金所发钱了！</li>
                            <li>微金所发钱了！！！！！</li>
                            <li>微金所发钱！！！！</li>
                            <li>微金所发！！！！</li>
                            <li>微金所发钱了，快来抢！！！！！</li>
                            <li>微金所发钱！！！！</li>
                            <li>微金所发钱了，快来抢！！！！！</li>
                        </ul>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="news02">
                        <ul>
                            <li>微金所发钱了，快来抢！！！！！</li>
                            <li>微金所发钱！！！！</li>
                            <li>微金所发钱了，快来抢！！！！！</li>
                            <li>微金所发钱了！！！！！</li>
                            <li>微金所发钱了，快来抢！！！！！</li>
                            <li>微金所发钱了！！！！</li>
                            <li>微金所发钱了，快来抢！！！！！</li>
                            <li>微金所发钱了，快来抢！！！！！</li>
                            <li>微金所抢！！！！！</li>
                            <li>微金所发钱抢！！！！！</li>
                        </ul>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="news03">
                        <ul>
                            <li>微金，快来抢！！！！！</li>
                            <li>微金，快！！</li>
                            <li>微金，快来抢！！！！！</li>
                            <li>微金，快来抢！！！！！</li>
                            <li>微金！！！</li>
                            <li>微金所发钱了，快来抢！！！！！</li>
                            <li>微金！！！</li>
                            <li>微金所发钱了，快来抢！！！！！</li>
                            <li>微金所发钱了快来抢！！！！！</li>
                            <li>微金所发了，快来抢！！！！！</li>
                        </ul>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="news04">
                        <ul>
                            <li>http://www.cnblogs.com/qingqingzou-143/</li>
                            <li>http://www.cnblogs.com/qingqingzou-143/</li>
                            <li>http://www.cnblogs.com/qingqingzou-143/</li>
                            <li>http://www.cnblogs.com/qingqingzou-143/</li>
                            <li>http://www.cnblogs.com/qingqingzou-143/！</li>
                            <li>http://www.cnblogs.com/qingqingzou-143/</li>
                            <li>http://www.cnblogs.com/qingqingzou-143/</li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /新闻列表 -->
<!-- 合作伙伴 -->
<section id="hzhb">
    <div class="container text-center">
        <h3>合作伙伴</h3>
        <ul class="center-block">
            <li><a href="#"><i class="icon-uniE930"></i></a></li>
            <li><a href="#"><i class="icon-uniE92F"></i></a></li>
            <li><a href="#"><i class="icon-uniE92E"></i></a></li>
            <li><a href="#"><i class="icon-uniE92A"></i></a></li>
            <li><a href="#"><i class="icon-uniE929"></i></a></li>
            <li><a href="#"><i class="icon-uniE931"></i></a></li>
            <li><a href="#"><i class="icon-uniE92C"></i></a></li>
            <li><a href="#"><i class="icon-uniE92B"></i></a></li>
            <li><a href="#"><i class="icon-uniE92D"></i></a></li>
        </ul>
    </div>
</section>
<!-- /合作伙伴 -->
<!-- 脚注区域 -->
<footer id="footer"></footer>
<!-- /脚注区域 -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!--Bootstrap的所有JS组件都是依赖JQuery的-->
<script src="lib/jquery/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>